<template>
 <el-container style="height: 500px; border: 1px solid #eee">
   <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
     <el-menu :default-openeds="['1', '3']">
       <el-submenu index="1">
         <template slot="title"><i class="el-icon-message"></i>导航一</template>
         <el-menu-item-group>
           <template slot="title">分组一</template>
           <el-menu-item index="1-1">选项1</el-menu-item>
           <el-menu-item index="1-2">选项2</el-menu-item>
         </el-menu-item-group>
         <el-menu-item-group title="分组2">
           <el-menu-item index="1-3">选项3</el-menu-item>
         </el-menu-item-group>
         <el-submenu index="1-4">
           <template slot="title">选项4</template>
           <el-menu-item index="1-4-1">选项4-1</el-menu-item>
         </el-submenu>
       </el-submenu>
       <el-submenu index="2">
         <template slot="title"><i class="el-icon-menu"></i>导航二</template>
         <el-menu-item-group>
           <template slot="title">分组一</template>
           <el-menu-item index="2-1">选项1</el-menu-item>
           <el-menu-item index="2-2">选项2</el-menu-item>
         </el-menu-item-group>
         <el-menu-item-group title="分组2">
           <el-menu-item index="2-3">选项3</el-menu-item>
         </el-menu-item-group>
         <el-submenu index="2-4">
           <template slot="title">选项4</template>
           <el-menu-item index="2-4-1">选项4-1</el-menu-item>
         </el-submenu>
       </el-submenu>
       <el-submenu index="3">
         <template slot="title"><i class="el-icon-setting"></i>导航三</template>
         <el-menu-item-group>
           <template slot="title">分组一</template>
           <el-menu-item index="3-1">选项1</el-menu-item>
           <el-menu-item index="3-2">选项2</el-menu-item>
         </el-menu-item-group>
         <el-menu-item-group title="分组2">
           <el-menu-item index="3-3">选项3</el-menu-item>
         </el-menu-item-group>
         <el-submenu index="3-4">
           <template slot="title">选项4</template>
           <el-menu-item index="3-4-1">选项4-1</el-menu-item>
         </el-submenu>
       </el-submenu>
     </el-menu>
   </el-aside>

   <el-container>
     <el-header style="text-align: right; font-size: 12px">
       <el-dropdown>
         <i class="el-icon-setting" style="margin-right: 15px"></i>
         <el-dropdown-menu slot="dropdown">
           <el-dropdown-item>查看</el-dropdown-item>
           <el-dropdown-item>新增</el-dropdown-item>
           <el-dropdown-item>删除</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
       <span>王小虎</span>
     </el-header>

     <el-main>
       <el-table :data="tableData">
         <el-table-column prop="date" label="日期" width="140">
         </el-table-column>
         <el-table-column prop="name" label="姓名" width="120">
         </el-table-column>
         <el-table-column prop="address" label="地址">
         </el-table-column>
       </el-table>
     </el-main>
   </el-container>
 </el-container>

</template>

<script>
import table0_0 from './report/table0_0'
import table0_1 from './report/table0_1'
import table0_2 from './report/table0_2'
import table0_3 from './report/table0_3'
import table0_4 from './report/table0_4'
import table0_5 from './report/table0_5'
import table0_6 from './report/table0_6'
import table0_7 from './report/table0_7'
import table0_8 from './report/table0_8'
import table1_0 from './report/table1_0'
import table1_1 from './report/table1_1'
import table1_2 from './report/table1_2'
import table1_3 from './report/table1_3'
import table1_4 from './report/table1_4'
import table1_5 from './report/table1_5'
import table2_0 from './report/table2_0'
import { getLastDayOfMonth} from "@/api/report/basic";

export default {
  name: "report",
  components:{
    table0_0,
    table0_1,
    table0_2,
    table0_3,
    table0_4,
    table0_5,
    table0_6,
    table0_7,
    table0_8,
    table1_0,
    table1_1,
    table1_2,
    table1_3,
    table1_4,
    table1_5,
    table2_0,
  },
  data() {
    return {
      chartbtn: false,
      chartflag: false,
      select_state: true,
      showmonth: false,
      showdaterange: true,
      dateRange: [],
      btnIndex: 0,
      charValueTypeOptions:[],
      valueTypes: {
        select1_0:[{fcode:"receiveTimes",fcontent:"领图次数"},
                   {fcode:"receiveNum_4D",fcontent:"4D数据（幅）"},
                   {fcode:"receiveNum_TopographicMap",fcontent:"地形图（张）"},
                   {fcode:"receiveNum_Point",fcontent:"控制点（点）"},
                   {fcode:"receiveNum_AerialImages",fcontent:"航摄影像（片）"},
                   {fcode:"receiveNum_SatelliteImages",fcontent:"卫星遥感影像（景）"}],
        select1_1:[{fcode:"receiveUnitNum",fcontent:"单位数量"},
                   {fcode:"receiveTimes",fcontent:"领取次数"},
                   {fcode:"receiveNum_F_D",fcontent:"领取数量（幅，点）"}],
        select1_2:[{fcode:"receiveTimes",fcontent:"领取次数"},
                   {fcode:"receiveNum",fcontent:"领取数量"}],
        select1_3:[{fcode:"receiveUnitNum",fcontent:"申领成果的单位数量（家）"},
                   {fcode:"receiveTimes",fcontent:"领取次数（次）"},
                   {fcode:"receiveNum_DXT",fcontent:"领取纸质地形图数量（幅）"},
                   {fcode:"receiveNum_4D",fcontent:"领取4D成果数量（幅）"},
                   {fcode:"receiveNum_Point",fcontent:"领取控制点成果数量（个）"}],
        select1_4:[{fcode:"receiveUnitNum",fcontent:"申领成果的单位数量（家）"},
                   {fcode:"receiveTimes",fcontent:"领取次数（次）"},
                   {fcode:"receiveNum",fcontent:"领取成果资料数量（幅，点）"}]
        },
      queryParams: {
          beginTime: "",
          endTime: "",
          selectMonth: "",
          chartValueType: "",
          chartValueTypeName: ""
      },
      btnGroup: [
        {
          id: 0,
          name: "基础测绘成果管理与应用直报系统数据统计",
          type: [
            {
              id: "0",
              title: "数字线划地图（DLG）提供情况",
            },
            {
              id: "1",
              title: "数字正射影像（DOM）提供情况",
            },
            {
              id: "2",
              title: "数字搞成模型（DEM）提供情况",
            },
            {
              id: "3",
              title: "数据栅格地图（DRG）提供情况",
            },
            {
              id: "4",
              title: "地形图提供情况",
            },
            {
              id: "5",
              title: "测绘基准成果提供情况",
            },
            {
              id: "6",
              title: "地理国情成果提供情况",
            },
            {
              id: "7",
              title: "航摄成果提供情况",
            },
            {
              id: "8",
              title: "卫星影像提供情况",
            },
          ],
        },
        {
          id: 1,
          name: "各类成果应用情况统计",
          type: [
            {
              id: "0",
              title: "领用单位统计",
            },
            {
              id: "1",
              title: "数据分发服务的行业统计",
            },
            {
              id: "2",
              title: "数据分发服务的典型应用统计",
            },
            {
              id: "3",
              title: "行政区划统计",
            },
            {
              id: "4",
              title: "国家（省市）级重点项目统计",
            },
            {
              id: "5",
              title: "国家（省市）级热点项目统计",
            },
          ],
        },
        {
          id: 2,
          name: "部门月报统计",
          type: [],
        },
        {
          id: 3,
          name: "分发统计汇总",
          type: [],
        },
      ],
      options: [],
      selectValue: "数字线划地图（DLG）提供情况",
      spanArr: [],
      spanArr1: [],
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      curr: "0_0"
    };
  },
  mounted: function () {
    this.options = this.btnGroup[0].type
  },
  methods: {
    getDefaultDate() {
      var nowDate = new Date();
      var y = nowDate.getFullYear();
      var m = nowDate.getMonth()+1;
      var d = nowDate.getDate();
      if (m >= 1 && m <= 9) {
              m = "0" + month;
      }
      var startDate = y + "-" + m + "-" + 1;
      var endDate = y + "-" + m + "-" + d;
      this.dateRange =[startDate,endDate];
      this.queryParams.selectMonth = y + "-" + m;
  //    this.reportSearch();
    },
    btnClick(item,i) {
      console.log(this.queryParams);
      this.options = item.type;
      if (item.id <= 1) {
        this.selectValue = item.type[0].title;
        this.select_state = true
      }else{
        this.select_state = false
      }
      if(item.id == 1){
        this.chartbtn = true
        this.showmonth = false;
      }else if(item.id == 2){
        this.showmonth = true;
        this.chartbtn = false
      }else{
        this.showmonth = false;
        this.chartbtn = false
      }
      this.showdaterange = !this.showmonth;
      this.curr = i + '_0'
      this.btnIndex = i
      this.chartflag = false;
      if(this.chartbtn){
         console.log("this.valueTypes:"+this.valueTypes["select"+this.curr]);
         this.charValueTypeOptions = this.valueTypes["select"+this.curr];
         this.queryParams.chartValueType = this.charValueTypeOptions[0].fcode;
         this.queryParams.chartValueTypeName = this.charValueTypeOptions[0].fcontent;
      }
    },
    selectChange(e) {
      this.options.forEach((item,index) =>{
        if(item.title == e){
          this.curr = this.btnIndex + '_' + index;
          return
        }
      })
          this.chartflag = false;
          if(this.chartbtn){
             console.log("this.valueTypes:"+this.valueTypes["select"+this.curr]);
             this.charValueTypeOptions = this.valueTypes["select"+this.curr];
             this.queryParams.chartValueType = this.charValueTypeOptions[0].fcode;
             this.queryParams.chartValueTypeName = this.charValueTypeOptions[0].fcontent;
          }
      console.log(this.curr);
      console.log(this.queryParams);
    },
    export2Excel() {
      this.$refs[this.curr].export2Excel(this.selectValue);
    },
    showChart(){
      this.chartflag = !this.chartflag;
      this.$refs[this.curr].showchart(this.selectValue,this.queryParams);
    },
    reportSearch(){
       console.log("触发父页面reportSearch");
       if(this.showmonth){
          this.queryParams.beginTime = this.queryParams.selectMonth+"-01";
          this.queryParams.endTime = getLastDayOfMonth(this.queryParams.selectMonth);
          this.$refs[this.curr].getReportData(this.queryParams);
       }else{
          if(this.dateRange.length==0){
              this.getDefaultDate();
          }
          this.queryParams.beginTime = this.dateRange[0];
          this.queryParams.endTime = this.dateRange[1];
          this.$refs[this.curr].getReportData(this.queryParams);
       }
    },
    valueTypeChange(value){
      //  this.queryParams.chartValueType = this.charValueTypeOptions[0].fcode;
       var array1 = this.charValueTypeOptions.filter(function get(item) {
                                           return item.fcode==value;
                                       });
       if((array1)&&(array1.length>0)){
          this.queryParams.chartValueTypeName = array1[0].fcontent;
          this.$refs[this.curr].refreshchart(this.queryParams);
       }
    }
  },
};
</script>
<style>
  .el-header {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }

  .el-aside {
    color: #333;
  }
</style>
